<template>
    <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>部门列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter='10'>
            <el-col :span='4' v-show='!form.isShow'>
                <el-button  type="primary" size="small" @click='addDept'>新增部门</el-button>
            </el-col>
            <el-col :span='4' v-show='form.isShow'>
                 <el-button  type="primary" size="small" @click='goBack()'>返回列表</el-button>
            </el-col>
            <el-col :span='4' v-show='!form.isShow'>
                <el-input size="small" placeholder="请输入部门简称或全称" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData">
                </el-input>
            </el-col>
        </el-row>
        <el-row class="bone-top-10" :gutter="10">
            <el-col :span='4'>
                <el-card>
                    <div slot='header'>
                        <span>部门树</span>
                    </div>
                    <div>
                        <el-tree :data='tree.treeData' :props="tree.defaultProps" @node-click="treeNodeClick"></el-tree>
                    </div>
                </el-card>
            </el-col>
            <el-col :span='20' v-show='!form.isShow'>
                <el-table :data='table.tableData' border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column label='编号' prop="deptId" width="60"></el-table-column>
                    <el-table-column label='简称' prop="shortName" min-width="80"></el-table-column>
                    <el-table-column label='全称' prop="fullName" min-width="120"></el-table-column>
                    <el-table-column label='负责人' prop="mgrName" width="120"></el-table-column>
                    <el-table-column label='负责人电话' prop="mgrPhone" width="120"></el-table-column>
                    <el-table-column label='上级部门' prop="pname" width="80"></el-table-column>
                    <el-table-column label='创建时间' prop="createTime" width="150"></el-table-column>
                    <el-table-column label='位置' prop="location" width="150"></el-table-column>
                    <el-table-column label='经度' prop="lng" width="100"></el-table-column>
                    <el-table-column label='纬度' prop="lat" width="100"></el-table-column>
                    <el-table-column label='地图层级' prop="zoom" width="80"></el-table-column>
                    <el-table-column label="操作" width="100" fixed="right">
                        <template slot-scope='scope'>
                            <el-button @click="modifyDept(scope.row)" type="text">修改</el-button>
                            <el-button @click="toDel(scope.row.deptId)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" :current-page="this.table.currentPage" :page-size="this.table.pageSize" layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
            </el-col>
            <el-col :span='8' v-show='form.isShow'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model='form' :rules='form.rules' ref='form' size='small' label-width="100px" label-position="right">
                        <el-form-item label='部门简称' prop="shortName">
                            <el-input v-model="form.shortName" placeholder="请输入简称"></el-input>
                        </el-form-item>
                        <el-form-item label='部门全称' prop="fullName">
                            <el-input v-model="form.fullName" placeholder="请输入全称"></el-input>
                        </el-form-item>
                        <el-form-item label='联系人' prop="mgrName">
                            <el-input v-model="form.mgrName" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                        <el-form-item label='联系人电话' prop="mgrPhone">
                            <el-input v-model="form.mgrPhone" placeholder="请输入联系人电话"></el-input>
                        </el-form-item>
                        <el-form-item label='上级部门' prop="pname">
                            <el-input :disabled="true" v-model="form.pname" placeholder="请选择上级部门"></el-input>
                        </el-form-item>
                        <el-form-item label='位置' prop="location">
                            <el-input v-model="form.location" placeholder="请输入位置"></el-input>
                        </el-form-item>
                        <el-form-item label='经度' prop="lng">
                            <el-input-number v-model="form.lng" placeholder="请输入经度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item label='纬度' prop="lat">
                            <el-input-number v-model="form.lat" placeholder="请输入纬度" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item label='地图层级' prop="zoom">
                            <el-input-number v-model="form.zoom" placeholder="请输入地图层级" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button @click="goBack()" type="primary">返回</el-button> 
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Http from '@/components/utils/httpUtil'
export default {
    data() {
        return {
            tree: {
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "name"
                },

            },
            table: {
                tableData: [],
                queryKey: '',
                pageSize: 10,
                currentPage: 1,
                rowCount: 0
            },
            form: {
                isShow: false,
                submitDisabled: false,
                isCreate: true,
                formTitle: '',
                deptId: '',
                shortName: '',
                fullName: '',
                mgrName: '',
                mgrPhone: '',
                pid: 0,
                pname: '',
                location: '',
                lng: 0,
                lat: 0,
                zoom: 0,
                rules: {
                    shortName: [{ required: true, message: "请输入简称", trigger: "blur" }],
                    fullName: [{ required: true, message: "请输入全称", trigger: "blur" }],
                    mgrName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
                    mgrPhone: [{ required: true, message: "请输入联系人电话", trigger: "blur" }]
                }
            }
        }
    },
    methods: {

        //返回table
        goBack(){
            this.form.isShow = false;
        },
        
        //tree节点点击
        treeNodeClick(data) {
            this.form.pid = data.deptId
            this.form.pname = data.name
        },

        //构建部门树
        createTree(data,pid){
            pid = pid || 0;
            let list = [];
            data.map(item=>{
                if(item.pid == pid){
                    item.children = this.createTree(data,item.deptId);
                    list.push(item)
                }
            })
            return list;
        },
        
        //获取部门树
        getTreeData(){
            let p = {};
            Http.fetch('/dept/listTree',p)
            .then(res=>{
                let pid = 0
                if(localStorage.deptPid){
                    pid = localStorage.deptPid
                }
                let tdata = this.createTree(res.data,pid);
                this.tree.treeData = tdata;
            })
        },
        
        
        //新增部门
        addDept() { 
            this.form.isShow = true;
            this.form.isCreate = true
            this.form.submitDisabled = false
            this.form.formTitle = '新增部门'
            this.form.deptId = ''
            this.form.shortName = ''
            this.form.fullName = ''
            this.form.mgrName = ''
            this.form.mgrPhone = ''
            this.form.pid = 0
            this.form.pname = ''
            this.form.location = ''
            this.form.lng = 114.305438
            this.form.lat = 30.542376
            this.form.zoom = 10
        },

        //table翻页
        handleCurrentChange(val) {
            this.table.currentPage = val;
            this.getTableData();
        },
        //获取表格数据
        getTableData() {
            let p = {};
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.queryKey;
            Http.fetch('/dept/list', p)
                .then(res => {
                    this.table.tableData = res.data.rows;
                    this.table.rowCount = res.data.total;
                })
        },
        //修改部门
        modifyDept(row){
            this.form.isShow = true;
            this.form.isCreate = false
            this.form.submitDisabled = false
            this.form.formTitle = '修改部门'
            this.form.deptId = row.deptId
            this.form.shortName = row.shortName
            this.form.fullName = row.fullName
            this.form.mgrName = row.mgrName
            this.form.mgrPhone = row.mgrPhone
            this.form.pid = row.pid
            this.form.pname = row.pname
            this.form.location = row.location
            this.form.lng = row.lng
            this.form.lat = row.lat
            this.form.zoom = row.zoom
        },
        //删除部门
        toDel(deptId){
            this.$confirm("是否确定删除该权限?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(()=>{
                let p = {}
                p.deptId = deptId
                return Http.fetch('/dept/delete',p)
            })
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTableData();
                this.getTreeData();
            })
            .catch(err=>{
                console.log('err',err)
                if(err!='cancel'){
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                }
            })
        },
        submitForm(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    this.form.submitDisabled = true
                    let url = '';
                    let p = {}
                    if(this.form.isCreate){
                        url = '/dept/add'
                    }else{
                        url = '/dept/modify'
                        p.deptId = this.form.deptId
                    }
                    p.shortName = this.form.shortName
                    p.fullName = this.form.fullName
                    p.mgrName = this.form.mgrName
                    p.mgrPhone = this.form.mgrPhone
                    p.pid = this.form.pid
                    p.location = this.form.location
                    p.lng = this.form.lng
                    p.lat = this.form.lat
                    p.zoom = this.form.zoom
                    Http.fetch(url,p)
                    .then(res=>{
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        });
                        this.form.submitDisabled = false;
                        this.form.isShow = false;
                        this.getTreeData();
                        this.getTableData();
                    })
                    .catch(err=>{
                        this.form.submitDisabled = false;
                        this.$message({
                            showClose: true,
                            message: err.errMsg,
                            type: "error"
                        });
                    })
                }
            })
        },
        
    },
    mounted() {
        this.getTreeData();
        this.getTableData();
    }
}
</script>

<style scoped>

</style>
